<template>
  <CloudDialog
    v-model:visible="visible"
    title="上传证书"
    :width="480"
    :mask-closable="false"
    :before-ok="handleSubmit"
    :before-close="handleClose">
    <a-form ref="formRef" layout="vertical" :model="formState">
      <a-form-item
        label="证书内容(PEM格式)"
        field="crt"
        :rules="{ required: true, message: '请输入证书内容' }"
        hide-asterisk>
        <a-textarea
          v-model="formState.crt"
          :auto-size="{
            maxRows: 6,
            minRows: 6
          }"
          :placeholder="`证书格式以 “-----BEGIN CERTIFICATE-----” 开头，
以 “-----END CERTIFICATE-----‘’ 结尾`"></a-textarea>
      </a-form-item>
      <a-form-item
        label="证书私钥(PEM格式)"
        field="private_key"
        :rules="{ required: true, message: '请输入证书私钥' }"
        hide-asterisk>
        <a-textarea
          v-model="formState.private_key"
          :auto-size="{
            maxRows: 6,
            minRows: 6
          }"
          :placeholder="`私钥格式以 “-----BEGIN (RSA|EC) PRIVATE KEY-----” 开头，
以 ‘’-----END (RSA|EC) PRIVATE KEY-----” 结尾`"></a-textarea>
      </a-form-item>
    </a-form>
  </CloudDialog>
</template>
<script lang="ts" setup>
import { postApiCertUploadApi } from '@/apis/modules/license'
import type { FormInstance } from '@arco-design/web-vue'

const visible = defineModel<boolean>({ required: true })
const emit = defineEmits(['reload'])
const formRef = ref<FormInstance>()
const route = useRoute()
const formState = reactive({
  crt: '',
  private_key: ''
})
const handleSubmit = async () => {
  const error = await formRef.value?.validate()

  if (error) return false
  const data = { ...formState, site_id: route.params.id as string }
  postApiCertUploadApi(data).then(() => {
    ToastUtils.success('上传成功')
    emit('reload', false)
  })
}
const handleClose = () => {
  formRef.value?.resetFields()
}
</script>
